import React from "react";
import _ from 'lodash'
import {Form as AntdForm, InputNumber, Select as AntdSelect, Space as AntdSpace} from 'antd';
import {VJsonComponent} from "../../factory";
import {YvanEvent} from "../../types";
import {apply, YvanEventBind, YvanEventDispatch} from "../../utils/helper";
import {FormItemBaseState, FormItemBaseProp, VJsonFormItemBase} from "./VJsonFormItemBase";
import * as Extend from "../../extend";

export interface NumberVJsonProp extends FormItemBaseProp<Number> {
    size?: 'large' | 'middle' | 'small'
    onChange?: YvanEvent<Number>
    onPressEnter?: YvanEvent<Number>
    onInput?: YvanEvent<Number>
    max?: number
    min?: number
    precision?: number
    decimalSeparator?: string
    step?: number
    formatter?:YvanEvent<Number>
}

export interface NumberState extends FormItemBaseState<Number> {

}

@VJsonComponent({
    view: 'number'
})
export default class Number extends VJsonFormItemBase<Number, NumberVJsonProp, NumberState> {
    static defaultProps = {
        ...VJsonFormItemBase.defaultProps,
        allowClear: true,
    }

    constructor(props: any) {
        super(props, Number.defaultProps);
    }

    protected onValueChange(this: any, e: any) {
        this.value = _.trim(e)
        YvanEventDispatch(this.state.onChange, this, e)
        if(this.props.vjson.type==='positive'){//只允许输入正数
            let test=/^\d+(?=\.{0,1}\d+$|$)/;
            if(!(test.exec(this.value))){
                this.value='';
            }
        }else if(this.props.vjson.limtDecimals&&this.value=='0'){
            this.value='';
        }
    }
    limtDecimals(value){//只允许输入大于0的正整数
        let _value = _.trim(value)
        if(_value=='0'){
            return ''
        }else{
            return value.replace(/^(0+)|[^\d]+/g,'')
        }
    }
    limtDecimalsNo(value){//不做限制
        return _.trim(value)
    }

    protected get _isRootFormItem() {
        return false
    }

    protected renderWrapper(): JSX.Element {
        if (Extend.isDebugMode()) {
            console.log('RenderNumber', this.toString())
        }

        const addonAfter =
            (typeof this.props.vjson.addonAfter === 'undefined')
                ? null
                : (<span className="ant-input-group-addon">
                        {
                            apply(this, this.props.vjson.addonAfter)
                        }
                </span>)

        return (
            //@ts-ignore
            <span className="ant-input-group-wrapper">
                <span className="ant-input-wrapper ant-input-group">
                    <AntdForm.Item noStyle
                                   {...this._getFormItemBindProperty(false)}
                    >
                        {/*@ts-ignore*/}
                        <InputNumber key={this.key} view_id={this.key} aria-roledescription={this.view}
                                     size={apply(this, this.props.vjson.size)}
                                     max={apply(this, this.props.vjson.max)}
                                     min={apply(this, this.props.vjson.min)}
                                     precision={apply(this, this.props.vjson.precision)}
                                     decimalSeparator={apply(this, this.props.vjson.decimalSeparator)}
                                     step={apply(this, this.props.vjson.step)}
                                     value={this.value}
                                     disabled={apply(this, this.props.vjson.disabled)}
                                     onChange={this.onValueChange.bind(this)}
                                     onInput={YvanEventBind(this.props.vjson.onInput, this)}
                                     formatter={this.props.vjson.limtDecimals?this.limtDecimals:this.limtDecimalsNo}
                                     onPressEnter={YvanEventBind(this.props.vjson.onPressEnter, this)}/>
                    </AntdForm.Item>
                    {
                        addonAfter
                    }
                </span>
            </span>
        )
    }

}
